<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hot Topic</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-gradient: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
            --secondary-gradient: linear-gradient(135deg, #8E2DE2 0%, #4A00E0 100%);
            --accent-color: #6c5ce7;
            --text-primary: #2d3436;
            --text-secondary: #636e72;
            --light-bg: #f9f9f9;
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            --hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
            --border-radius: 12px;
            --transition-speed: 0.3s;
        }

        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: none;
            min-height: 100vh;
            padding: 0;
            color: var(--text-primary);
            line-height: 1.6;
        }

        .file-item {
            padding: 10px 15px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            border: 1px solid #eee;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .file-item:hover {
            background-color: #e9e9e9;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .file-info {
            display: flex;
            gap: 5px; /* 调整这里的值来控制名称、平台、时间之间的间距 */
            flex-wrap: wrap;
        }

        .file-display-name {
            font-weight: bold;
            color: #333;
        }

        .file-platform {
            color: #666;
            font-size: 0.9em;
        }

        .file-date {
            color: #999;
            font-size: 0.8em;
        }

        .container {
            max-width: 100%;
            margin: 0;
            background: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            position: relative;
        }

        .header {
            background: var(--secondary-gradient);
            color: white;
            padding: 20px 30px; /* 调整 padding */
            text-align: left; /* 标题靠左 */
            position: relative;
            overflow: hidden;
            display: flex; /* 使用 flex 布局 */
            align-items: center; /* 垂直居中 */
            justify-content: space-between; /* 标题和导航左右分布 */
        }

        .header::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
            pointer-events: none;
        }

        .header h1 {
            font-size: 3em;
            margin-bottom: 0; /* 移除 margin-bottom */
            font-weight: 600;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .header p {
            display: none; /* 隐藏描述文字 */
        }

        .nav-links {
            display: flex;
            /* justify-content: center; */ /* 移除此行 */
            gap: 20px;
            flex-wrap: wrap;
        }

        .nav-links a {
            display: inline-flex;
            align-items: center;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.15);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-size: 15px;
            font-weight: 500;
            transition: all var(--transition-speed) ease;
            border: 1px solid rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
        }

        .nav-links a:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .main-content {
            padding: 50px;
            background-color: var(--light-bg);
        }

        .section {
            margin-bottom: 50px;
            background: white;
            padding: 30px;
            border-radius: var(--border-radius);
            box-shadow: var(--card-shadow);
            transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
        }

        .section:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }

        .section-title {
            font-size: 1.8em;
            color: var(--text-primary);
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px solid var(--accent-color);
            position: relative;
            display: inline-block;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 50%;
            height: 3px;
            background: var(--primary-gradient);
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1.05em;
        }

        .form-control {
            width: 100%;
            padding: 14px 18px;
            border: 2px solid #e1e5e9;
            border-radius: var(--border-radius);
            font-size: 16px;
            transition: all var(--transition-speed) ease;
            background-color: #f8fafc;
        }

        .form-control:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15);
            background-color: white;
        }

        select.form-control {
            appearance: none;
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c5ce7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 15px center;
            padding-right: 45px;
        }

        .btn {
            padding: 14px 28px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0));
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
        }

        .btn:hover::after {
            opacity: 1;
        }

        .btn-primary {
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 4px 15px rgba(71, 118, 230, 0.4);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(71, 118, 230, 0.5);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
            box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
        }

        .btn-secondary:hover {
            background: #5a6268;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(108, 117, 125, 0.5);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }

        .topics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 25px;
        }

        .topic-item {
            padding: 20px;
            border: 1px solid #e1e5e9;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            background: white;
            position: relative;
            overflow: hidden;
        }

        .topic-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 0;
            background: var(--primary-gradient);
            transition: height var(--transition-speed) ease;
        }

        .topic-item:hover {
            border-color: var(--accent-color);
            box-shadow: var(--card-shadow);
            transform: translateY(-5px);
        }

        .topic-item:hover::before {
            height: 100%;
        }

        .topic-item.selected {
            border-color: var(--accent-color);
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 10px 25px rgba(71, 118, 230, 0.4);
        }

        .topic-item.selected::before {
            display: none;
        }

        .topic-content {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .topic-title {
            font-size: 16px;
            line-height: 1.5;
            font-weight: 500;
            padding-left: 10px;
        }

        .topic-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 13px;
        }

        .heat {
            color: #ff6b6b;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .heat::before {
            content: '🔥';
            font-size: 14px;
        }

        .view-btn {
            background: var(--accent-color);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 6px 12px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all var(--transition-speed) ease;
        }

        .view-btn:hover {
            background: #5649c0;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(108, 92, 231, 0.3);
        }

        .topic-item.selected .view-btn {
            background: rgba(255, 255, 255, 0.2);
            color: white;
        }

        .topic-item.selected .view-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
        }

        .status-indicator {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            margin-right: 10px;
            position: relative;
        }

        .status-indicator::after {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border-radius: 50%;
            border: 2px solid transparent;
            animation: pulse 1.5s infinite;
        }

        .status-healthy {
            background-color: #2ecc71;
        }

        .status-healthy::after {
            border-color: #2ecc71;
        }

        .status-warning {
            background-color: #f39c12;
        }

        .status-warning::after {
            border-color: #f39c12;
        }

        .status-error {
            background-color: #e74c3c;
        }

        .status-error::after {
            border-color: #e74c3c;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.5; }
            100% { transform: scale(1); opacity: 1; }
        }

        .alert {
            padding: 20px;
            border-radius: var(--border-radius);
            margin-bottom: 25px;
            position: relative;
            border-left: 5px solid transparent;
        }

        .alert-success {
            background-color: #d4edda;
            border-color: #2ecc71;
            color: #155724;
        }

        .alert-error {
            background-color: #f8d7da;
            border-color: #e74c3c;
            color: #721c24;
        }

        .alert-info {
            background-color: #d1ecf1;
            border-color: #3498db;
            color: #0c5460;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 30px;
        }

        .loading.show {
            display: block;
        }

        .spinner {
            border: 4px solid rgba(108, 92, 231, 0.1);
            border-top: 4px solid var(--accent-color);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .two-column {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        @media (max-width: 992px) {
            .main-content {
                padding: 30px;
            }
            
            .section {
                padding: 25px;
            }
        }

        @media (max-width: 768px) {
            .two-column {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .topics-grid {
                grid-template-columns: 1fr;
            }
            
            .main-content {
                padding: 20px;
            }
            
            .header h1 {
                font-size: 2.5em;
            }
            
            body {
                padding: 15px;
            }
        }

        /* Dashboard Specific Styles */
        .dashboard-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .dashboard-card {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: all var(--transition-speed) ease;
            border: 1px solid #e0e0e0;
        }

        .dashboard-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .dashboard-card h3 {
            font-size: 1.1em;
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .dashboard-card p {
            font-size: 2.8em;
            font-weight: 700;
            color: var(--accent-color);
            line-height: 1;
        }

        .dashboard-list {
            list-style: none;
            padding: 0;
        }

        .dashboard-list-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95em;
            color: var(--text-primary);
        }

        .dashboard-list-item:last-child {
            border-bottom: none;
        }

        .dashboard-list-item strong {
            color: var(--accent-color);
        }

        .quick-access-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
            margin-top: 20px;
        }

        .quick-access-links .btn {
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 25px;
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .quick-access-links .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 480px) {
            .dashboard-card p {
                font-size: 2.2em;
            }
            .quick-access-links {
                justify-content: center;
            }
        }

        /* Dashboard Specific Styles */
        .dashboard-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .dashboard-card {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: all var(--transition-speed) ease;
            border: 1px solid #e0e0e0;
        }

        .dashboard-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .dashboard-card h3 {
            font-size: 1.1em;
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .dashboard-card p {
            font-size: 2.8em;
            font-weight: 700;
            color: var(--accent-color);
            line-height: 1;
        }

        .dashboard-list {
            list-style: none;
            padding: 0;
        }

        .dashboard-list-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95em;
            color: var(--text-primary);
        }

        .dashboard-list-item:last-child {
            border-bottom: none;
        }

        .dashboard-list-item strong {
            color: var(--accent-color);
        }

        .quick-access-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
            margin-top: 20px;
        }

        .quick-access-links .btn {
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 25px;
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .quick-access-links .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 480px) {
            .dashboard-card p {
                font-size: 2.2em;
            }
            .quick-access-links {
                justify-content: center;
            }
        }

        /* Dashboard Specific Styles */
        .dashboard-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .dashboard-card {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: all var(--transition-speed) ease;
            border: 1px solid #e0e0e0;
        }

        .dashboard-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .dashboard-card h3 {
            font-size: 1.1em;
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .dashboard-card p {
            font-size: 2.8em;
            font-weight: 700;
            color: var(--accent-color);
            line-height: 1;
        }

        .dashboard-list {
            list-style: none;
            padding: 0;
        }

        .dashboard-list-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95em;
            color: var(--text-primary);
        }

        .dashboard-list-item:last-child {
            border-bottom: none;
        }

        .dashboard-list-item strong {
            color: var(--accent-color);
        }

        .quick-access-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
            margin-top: 20px;
        }

        .quick-access-links .btn {
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 25px;
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .quick-access-links .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 480px) {
            .dashboard-card p {
                font-size: 2.2em;
            }
            .quick-access-links {
                justify-content: center;
            }
        }

        /* Dashboard Specific Styles */
        .dashboard-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .dashboard-card {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: all var(--transition-speed) ease;
            border: 1px solid #e0e0e0;
        }

        .dashboard-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .dashboard-card h3 {
            font-size: 1.1em;
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .dashboard-card p {
            font-size: 2.8em;
            font-weight: 700;
            color: var(--accent-color);
            line-height: 1;
        }

        .dashboard-list {
            list-style: none;
            padding: 0;
        }

        .dashboard-list-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95em;
            color: var(--text-primary);
        }

        .dashboard-list-item:last-child {
            border-bottom: none;
        }

        .dashboard-list-item strong {
            color: var(--accent-color);
        }

        .quick-access-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
            margin-top: 20px;
        }

        .quick-access-links .btn {
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 25px;
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .quick-access-links .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 480px) {
            .dashboard-card p {
                font-size: 2.2em;
            }
            .quick-access-links {
                justify-content: center;
            }
        }

        /* Dashboard Specific Styles */
        .dashboard-card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .dashboard-card {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            text-align: center;
            transition: all var(--transition-speed) ease;
            border: 1px solid #e0e0e0;
        }

        .dashboard-card:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        }

        .dashboard-card h3 {
            font-size: 1.1em;
            color: var(--text-secondary);
            margin-bottom: 10px;
            font-weight: 500;
        }

        .dashboard-card p {
            font-size: 2.8em;
            font-weight: 700;
            color: var(--accent-color);
            line-height: 1;
        }

        .dashboard-list {
            list-style: none;
            padding: 0;
        }

        .dashboard-list-item {
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.95em;
            color: var(--text-primary);
        }

        .dashboard-list-item:last-child {
            border-bottom: none;
        }

        .dashboard-list-item strong {
            color: var(--accent-color);
        }

        .quick-access-links {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: flex-start;
            margin-top: 20px;
        }

        .quick-access-links .btn {
            padding: 10px 20px;
            font-size: 15px;
            border-radius: 25px;
            background: var(--primary-gradient);
            color: white;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        }

        .quick-access-links .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 480px) {
            .dashboard-card p {
                font-size: 2.2em;
            }
            .quick-access-links {
                justify-content: center;
            }
        }

        /* 热门热点卡片样式 */
        .hot-topic-item {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .hot-topic-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .hot-topic-content {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }

        .hot-topic-rank {
            font-weight: bold;
            margin-right: 10px;
            color: #007bff;
        }

        .hot-topic-title {
            flex-grow: 1;
            margin-right: 10px;
            font-size: 1.1em;
            color: #333;
        }

        .hot-topic-platform {
            font-size: 0.9em;
            color: #6c757d;
            margin-right: 10px;
        }

        .hot-topic-engagement strong {
            color: #dc3545;
        }

        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: #666;
        }

        .loading .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left-color: #007bff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin-bottom: 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

.hot-topics-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px; /* 调整标题和列表之间的间距 */
        }

        .hot-topics-header h3 {
            margin: 0; /* 移除 h3 默认的 margin */
            display: flex;
            align-items: center;
        }

        .hot-topics-header .btn {
            margin-left: 10px; /* 按钮左侧间距 */
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.9em;
        }

    </style>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚀 风向智语</h1>
            <p>微信公众号热点文章AI生成与发布系统</p>
            <div class="nav-links">
                <a href="/hot-topic">🏠 热点采集与分析</a>
                <a href="/editor">📝 文章编辑与查看</a>
                <a href="/multi-generator">📝 基于主题的文章生成</a>
            </div>
        </div>

        <div class="main-content">
            <!-- 系统首页 (Dashboard) -->
            <div class="section">
                <h2 class="section-title">🏠 系统首页 (Dashboard)</h2>

                <!-- 系统概览卡片 -->
                <div class="dashboard-card-grid">
                    <div class="dashboard-card">
                        <h3>今日抓取热点数</h3>
                        <p>150</p>
                    </div>
                    <div class="dashboard-card">
                        <h3>生成文章数</h3>
                        <p>25</p>
                    </div>
                    <div class="dashboard-card">
                        <h3>公众号成功发布数</h3>
                        <p>10</p>
                    </div>
                </div>

                <!-- 热门热点展示 -->
                <div class="section" style="margin-bottom: 30px;">
                    <div class="hot-topics-header">
                        <h3 class="section-title" style="display: inline-block; margin-right: 10px;">🔥 热门热点 (各平台Top1)</h3>
                        <button id="refreshHotTopicsBtn" class="btn btn-sm btn-outline-secondary" style="vertical-align: middle;">刷新</button>
                    </div>
                    <ul class="dashboard-list">
                        <li class="dashboard-list-item"><span>1. 话题A (微博)</span> <span>热度: <strong>1.2M</strong></span></li>
                        <li class="dashboard-list-item"><span>2. 话题B (抖音)</span> <span>热度: <strong>980K</strong></span></li>
                        <li class="dashboard-list-item"><span>3. 话题C (知乎)</span> <span>热度: <strong>750K</strong></span></li>
                        <li class="dashboard-list-item"><span>4. 话题D (百度)</span> <span>热度: <strong>600K</strong></span></li>
                        <li class="dashboard-list-item"><span>5. 话题E (小红书)</span> <span>热度: <strong>500K</strong></span></li>
                    </ul>
                </div>

                <!-- 最近生成内容 -->
                <div class="section" style="margin-bottom: 30px;" id="file-list">
                    <h3 class="section-title">📝 最近生成内容</h3>
                    <div id="file-list-content">
                        <div class="loading show">
                            <div class="spinner"></div>
                            <p>加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End 系统首页 (Dashboard) -->

            <!-- 系统状态 -->
            <div class="section">
                <h2 class="section-title">📊 系统状态</h2>
                <div id="system-status">
                    <div class="loading show">
                        <div class="spinner"></div>
                        <p>正在检查系统状态...</p>
                    </div>
                </div>
            </div>

            <div class="two-column">
                <!-- 热点话题获取 -->
                <div class="section">
                    <h2 class="section-title">🔥 单平台热点话题</h2>
                    
                    <div class="form-group">
                        <label for="platform-select">选择平台：</label>
                        <select id="platform-select" class="form-control">
                            <option value="微博">微博</option>
                            <option value="抖音">抖音</option>
                            <option value="哔哩哔哩">哔哩哔哩</option>
                            <option value="今日头条">今日头条</option>
                            <option value="百度">百度</option>
                            <option value="知乎热榜">知乎</option>
                    
                            <option value="小红书">小红书</option>
                            <option value="快手">快手</option>
                            <option value="虎扑">虎扑</option>
                            <option value="豆瓣小组">豆瓣小组</option>
                            <option value="澎湃新闻">澎湃新闻</option>
    
                            <option value="微信">微信</option>
                            <option value="实时榜中榜">实时榜中榜</option>
                            <option value="开源中国">开源中国</option>
                            <option value="GitHub">GitHub</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <button id="fetch-topics-btn" class="btn btn-primary">获取热点话题</button>
                    </div>

                    <div id="topics-container">
                        <!-- 话题列表将在这里显示 -->
                    </div>
                </div>

                <!-- 文章生成 -->
                <div class="section">
                    <h2 class="section-title">✍️ 文章生成</h2>
                    
                    <div class="form-group">
                        <label for="custom-title">相关话题：</label>
                        <input type="text" id="custom-title" class="form-control" placeholder="输入自定义标题，或从左侧选择热点话题">
                    </div>

                    <div class="form-group">
                        <label for="ai-model-select">AI模型：</label>
                        <select id="ai-model-select" class="form-control">
                            <option value="qwen">Qwen</option>
                            <option value="kimi">Kimi-K2</option>
                            <option value="spark">Spark</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <button id="generate-only-btn" class="btn btn-primary">生成文章</button>
                    </div>

                    <div id="result-container">
                        <!-- 结果将在这里显示 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        class HTTool {
            constructor() {
                this.selectedTopic = null;
                this.socket = null;
                this.currentTaskId = null;
                this.selectedFiles = new Set(); // 补充选中文件集合
                this.init();
            }

            init() {
                this.initSocket();
                this.bindEvents();
                this.checkSystemStatus();
                this.loadFileList();
                this.loadHotTopics();

                // 为刷新按钮添加事件监听器
                const refreshButton = document.getElementById('refreshHotTopicsBtn');
                if (refreshButton) {
                    refreshButton.addEventListener('click', () => {
                        sessionStorage.removeItem('cachedHotTopics'); // 清除缓存
                        this.loadHotTopics(); // 重新加载热门热点
                    });
                }
            }

            // 新增：加载热门热点
            async loadHotTopics() {
                const hotTopicsContainer = document.querySelector('.dashboard-list');
                if (!hotTopicsContainer) {
                    console.error("未找到热门热点容器");
                    return;
                }

                // 尝试从 sessionStorage 读取缓存数据
                const cachedHotTopics = sessionStorage.getItem('cachedHotTopics');
                if (cachedHotTopics) {
                    try {
                        const data = JSON.parse(cachedHotTopics);
                        this.renderHotTopics(data); // 渲染缓存数据
                        console.log("从 sessionStorage 加载热门热点");
                        return;
                    } catch (e) {
                        console.error("解析 sessionStorage 缓存失败:", e);
                        sessionStorage.removeItem('cachedHotTopics'); // 清除无效缓存
                    }
                }

                hotTopicsContainer.innerHTML = '<div class="loading show"><div class="spinner"></div><p>加载中...</p></div>'; // 显示加载动画

                try {
                    const response = await fetch('/api/all-platform-first-hot-topics');
                    const result = await response.json();

                    if (result.success && result.data.length > 0) {
                        sessionStorage.setItem('cachedHotTopics', JSON.stringify(result.data)); // 缓存数据
                        this.renderHotTopics(result.data); // 渲染新数据
                    } else {
                        hotTopicsContainer.innerHTML = '<li class="dashboard-list-item"><span>暂无热门热点数据</span></li>';
                    }
                } catch (error) {
                    console.error("加载热门热点失败:", error);
                    hotTopicsContainer.innerHTML = '<li class="dashboard-list-item"><span>加载热门热点失败</span></li>';
                }
            }

            // 新增：渲染热门热点的方法
            renderHotTopics(data) {
                const hotTopicsContainer = document.querySelector('.dashboard-list');
                hotTopicsContainer.innerHTML = ''; // 清空现有内容
                data.forEach((item, index) => {
                    const listItem = document.createElement('li');
                    listItem.classList.add('hot-topic-item');
                    listItem.innerHTML = `
                        <div class="hot-topic-content">
                            <span class="hot-topic-rank">${index + 1}.</span>
                            <span class="hot-topic-title">${item.topic.name}</span>
                            <span class="hot-topic-platform">(${item.platform})</span>
                            <span class="hot-topic-engagement">热度: <strong>${item.topic.lastCount}</strong></span>
                        </div>
                    `;
                    hotTopicsContainer.appendChild(listItem);
                });
            }

            // 补充选中计数更新方法
            updateSelectedCount() {
                const count = this.selectedFiles.size;
                // 可根据需求更新页面上的选中计数显示
                console.log(`选中了${count}个文件`);
            }

            // 补充文件选择变更处理
            onFileCheckboxChange(filename, checked) {
                if (checked) {
                    this.selectedFiles.add(filename);
                } else {
                    this.selectedFiles.delete(filename);
                }
                this.updateSelectedCount();
            }

            // 补充文件加载方法
            loadFile(filename) {
                console.log(`加载文件: ${filename}`);
                // 实际加载文件的逻辑
            }
            async loadFileList() {
                const container = document.getElementById('file-list-content');
                container.innerHTML = `
                        <div class="loading show">
                            <div class="spinner"></div>
                            <p>加载中...</p>
                        </div>
                    `;

                try {
                    const response = await fetch('/api/articles');
                    const result = await response.json();

                    if (result.success) {
                        const files = result.data.files;

                        if (files.length > 0) {
                            container.innerHTML = files.map(file => {
                                const filenameParts = file.name.match(/^(\d{8}_\d{6})_([a-zA-Z0-9-]+)_(.*)\.md$/);
                                let displayName = file.name;
                                let platform = '';
                                if (filenameParts) {
                                    platform = filenameParts[2];
                                    displayName = filenameParts[3];
                                } else {
                                    const simpleFilenameParts = file.name.match(/^(\d{8}_\d{6})_(.*)\.md$/);
                                    if (simpleFilenameParts) {
                                        displayName = simpleFilenameParts[2];
                                    }
                                }
                                return `
                                    <div class="file-item" data-filename="${file.name}">
                                        <div class="file-info" onclick="window.location.href = '/editor?file_path=' + encodeURIComponent('${file.name}')">
                                            <span class="file-display-name">${displayName}</span>
                                            ${platform ? `<span class="file-platform"> | ${platform}</span>` : ''}
                                            <span class="file-date"> | ${file.modified}</span>
                                        </div>
                                    </div>
                                `;
                            }).join('');

                            // 清空选中状态
                            this.selectedFiles.clear();
                            this.updateSelectedCount();
                        } else {
                            container.innerHTML = `
                                    <div class="empty-state">
                                        <h3>📄 暂无文章</h3>
                                        <p>还没有生成任何文章</p>
                                    </div>
                                `;
                        }
                    } else {
                        container.innerHTML = `
                                <div class="alert alert-error">
                                    <p>❌ ${result.error}</p>
                                </div>
                            `;
                    }
                } catch (error) {
                    container.innerHTML = `
                            <div class="alert alert-error">
                                <p>❌ 加载文件列表失败</p>
                            </div>
                        `;
                }
                
        }
            initSocket() {
                this.socket = io();
                
                this.socket.on('connect', () => {
                    console.log('WebSocket连接成功');
                });
                
                this.socket.on('disconnect', () => {
                    console.log('WebSocket连接断开');
                });
                
                this.socket.on('task_update', (data) => {
                    this.handleTaskUpdate(data);
                });
            }

            handleTaskUpdate(data) {
                if (data.task_id !== this.currentTaskId) {
                    return;
                }
                
                const container = document.getElementById('result-container');
                
                if (data.status === 'generating_title') {
                    container.innerHTML = `
                        <div class="loading show">
                            <div class="spinner"></div>
                            <p>正在生成吸引人的标题...</p>
                        </div>
                    `;
                } else if (data.status === 'generating_article') {
                    container.innerHTML = `
                        <div class="loading show">
                            <div class="spinner"></div>
                            <p>正在生成文章内容...</p>
                            <p>使用标题: ${data.title || '生成中...'}</p>
                        </div>
                    `;
                } else if (data.status === 'saving') {
                    container.innerHTML = `
                        <div class="loading show">
                            <div class="spinner"></div>
                            <p>正在保存文章...</p>
                        </div>
                    `;
                } else if (data.status === 'completed') {
                    container.innerHTML = `
                        <div class="alert alert-success">
                            <h4>✅ 文章生成成功！</h4>
                            <p><strong>原标题:</strong> ${data.original_title}</p>
                            <p><strong>生成标题:</strong> ${data.final_title}</p>
                            <p><strong>文件路径:</strong> ${data.file_path}</p>
                            <p>文章已保存到本地文件！正在跳转到编辑页面...</p>
                            <p>如果页面跳转失败，请自行访问 /editor </p>
                        </div>
                    `;
                    
                    // 重置按钮状态
                    const btn = document.getElementById('generate-only-btn');
                    btn.disabled = false;
                    btn.textContent = '生成文章';
                    this.currentTaskId = null;
                    
                    // 2秒后跳转到编辑页面
                    setTimeout(() => {
                        window.open('/editor', '_blank');
                    }, 2000);
                } else if (data.status === 'error') {
                    container.innerHTML = `
                        <div class="alert alert-error">
                            <p>❌ ${data.error}</p>
                        </div>
                    `;
                    
                    // 重置按钮状态
                    const btn = document.getElementById('generate-only-btn');
                    btn.disabled = false;
                    btn.textContent = '生成文章';
                    this.currentTaskId = null;
                }
            }

            bindEvents() {
                // 获取热点话题
                document.getElementById('fetch-topics-btn').addEventListener('click', () => {
                    this.fetchTopics();
                });

                // 仅生成文章
                document.getElementById('generate-only-btn').addEventListener('click', () => {
                    this.generateArticle();
                });
            }

            async checkSystemStatus() {
                try {
                    const response = await fetch('/api/status');
                    const result = await response.json();
                    
                    const statusContainer = document.getElementById('system-status');
                    
                    if (result.success) {
                        const status = result.data.status;
                        const overall = result.data.overall;
                        
                        // 动态获取AI模型状态
                        const aiModelKey = Object.keys(status).find(key => key.endsWith('_api'));
                        const aiModelName = aiModelKey ? aiModelKey.replace('_api', '').toUpperCase() : 'AI';
                        const aiModelStatus = aiModelKey ? status[aiModelKey] : false;
                        
                        statusContainer.innerHTML = `
                            <div class="alert alert-${overall == 'healthy' ? 'success' : 'info'}">
                                <h4>🔧 系统组件状态</h4>
                                <p><span class="status-indicator status-${aiModelStatus ? 'healthy' : 'error'}"></span>各AI模型: ${aiModelStatus ? '正常' : '异常'}</p>
                                <p><span class="status-indicator status-${status.wechat_api ? 'healthy' : 'error'}"></span>微信API: ${status.wechat_api ? '正常' : '异常'}</p>
                                <p><span class="status-indicator status-${status.wechat_verified ? 'healthy' : 'warning'}"></span>微信认证: ${status.wechat_verified ? '已认证' : '未认证'}</p>
                                <p><strong>${result.data.message}</strong></p>
                            </div>
                        `;
                    } else {
                        statusContainer.innerHTML = `
                            <div class="alert alert-error">
                                <p>❌ 系统状态检查失败: ${result.error}</p>
                            </div>
                        `;
                    }
                } catch (error) {
                    document.getElementById('system-status').innerHTML = `
                        <div class="alert alert-error">
                            <p>❌ 无法连接到服务器</p>
                        </div>
                    `;
                }
            }

            async fetchTopics() {
                const platform = document.getElementById('platform-select').value;
                const btn = document.getElementById('fetch-topics-btn');
                const container = document.getElementById('topics-container');
                
                btn.disabled = true;
                btn.textContent = '获取中...';
                
                container.innerHTML = `
                    <div class="loading show">
                        <div class="spinner"></div>
                        <p>正在获取${platform}热点话题...</p>
                    </div>
                `;

                try {
                    const response = await fetch(`/api/hot-topics?platform=${encodeURIComponent(platform)}&count=30`);
                    const result = await response.json();
                    
                    if (result.success) {
                        const topics = result.data.topics;
                        
                        if (topics.length > 0) {
                            container.innerHTML = `
                                <div class="topics-grid">
                                    ${topics.map((topic, index) => `
                                        <div class="topic-item" data-topic="${topic.name || topic}">
                                            <div class="topic-content">
                                                <div class="topic-title">
                                                    <strong>#${topic.rank || (index + 1)}</strong> ${topic.name || topic}
                                                </div>
                                                <div class="topic-meta">
                                                    ${topic.lastCount ? `<span class="heat">🔥 ${topic.lastCount}</span>` : ''}
                                                    ${topic.url ? `<button class="view-btn" onclick="window.open('${topic.url}', '_blank')">查看</button>` : ''}
                                                </div>
                                            </div>
                                        </div>
                                    `).join('')}
                                </div>
                            `;
                            
                            // 绑定话题选择事件
                            container.querySelectorAll('.topic-item').forEach(item => {
                                item.addEventListener('click', (e) => {
                                    // 如果点击的是查看按钮，不触发选择事件
                                    if (e.target.classList.contains('view-btn')) {
                                        return;
                                    }
                                    
                                    // 移除其他选中状态
                                    container.querySelectorAll('.topic-item').forEach(i => i.classList.remove('selected'));
                                    // 添加选中状态
                                    item.classList.add('selected');
                                    // 保存选中的话题
                                    this.selectedTopic = item.dataset.topic;
                                    // 更新自定义标题输入框
                                    document.getElementById('custom-title').value = this.selectedTopic;
                                });
                            });
                        } else {
                            container.innerHTML = `
                                <div class="alert alert-info">
                                    <p>📝 暂无${platform}热点话题数据</p>
                                </div>
                            `;
                        }
                    } else {
                        container.innerHTML = `
                            <div class="alert alert-error">
                                <p>❌ ${result.error}</p>
                            </div>
                        `;
                    }
                } catch (error) {
                    container.innerHTML = `
                        <div class="alert alert-error">
                            <p>❌ 网络请求失败，请检查服务器连接</p>
                        </div>
                    `;
                } finally {
                    btn.disabled = false;
                    btn.textContent = '获取热点话题';
                }
            }

            async generateArticle() {
                const title = document.getElementById('custom-title').value.trim();
                const aiModel = document.getElementById('ai-model-select').value;
                
                if (!title) {
                    this.showResult('error', '请输入相关话题或选择热点话题');
                    return;
                }

                const btn = document.getElementById('generate-only-btn');
                const container = document.getElementById('result-container');
                
                btn.disabled = true;
                btn.textContent = '生成中...';
                
                container.innerHTML = `
                    <div class="loading show">
                        <div class="spinner"></div>
                        <p>正在初始化生成任务...</p>
                        <p>使用AI模型: ${aiModel.toUpperCase()}</p>
                    </div>
                `;

                try {
                    const response = await fetch('/api/generate-article', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ title, ai_model: aiModel })
                    });
                    
                    const result = await response.json();
                    
                    if (result.success) {
                        // 保存任务ID用于接收WebSocket更新
                        this.currentTaskId = result.data.task_id;
                        
                        container.innerHTML = `
                            <div class="loading show">
                                <div class="spinner"></div>
                                <p>任务已启动，正在生成文章...</p>
                                <p>任务ID: ${result.data.task_id}</p>
                            </div>
                        `;
                    } else {
                        container.innerHTML = `
                            <div class="alert alert-error">
                                <p>❌ ${result.error}</p>
                            </div>
                        `;
                        
                        btn.disabled = false;
                        btn.textContent = '生成文章';
                    }
                } catch (error) {
                    container.innerHTML = `
                        <div class="alert alert-error">
                            <p>❌ 网络请求失败，请检查服务器连接</p>
                        </div>
                    `;
                    
                    btn.disabled = false;
                    btn.textContent = '生成文章';
                }
            }

            showResult(type, message) {
                const container = document.getElementById('result-container');
                const alertClass = type === 'error' ? 'alert-error' : 'alert-info';
                
                container.innerHTML = `
                    <div class="alert ${alertClass}">
                        <p>${message}</p>
                    </div>
                `;
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            new HTTool();
        });
    </script>
</body>
</html>